import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react'
import { Text, View, ScrollView, PageContainer, Image, Textarea } from '@tarojs/components'
import styles from './index.module.scss'

const PopFeedback = forwardRef((props:any, ref) => {
  const [content, setContent] = useState<any>([
    { title: '有害/不安全', id: 1 },
    { title: '虚假信息', id: 2 },
    { title: '没有帮助', id: 3 },
    { title: '其他', id: 4 }
  ])
  const [tabIndex, setTabIndex] = useState<any>()
  const [showState, setShowState] = useState<any>(false)
  const [tabContent, setTabContent] = useState<any>({})
  const [iptValue, setIptValue] = useState<string>('')
  const [dataItem, setDataItem] = useState<any>({})
  // 使用 useImperativeHandle 自定义暴露给父组件的实例值
  useImperativeHandle(ref, () => ({
    // 暴露 handleClick 方法给父组件
    open: (item) => {
      setDataItem(item)
      console.log('open')
      setShowState(true)
    },
    close: () => {
      setShowState(false)
      setDataItem({})
      setIptValue('')
      setTabIndex(null)
    }
  }))
  const iptFun = (e) => {
    setIptValue(e.detail.value)
  }
  return (
    <PageContainer show={showState} round>
      <View className={styles['popFeedback']}>
        <View className={styles['top-title']}>
          <View></View>
          <View>反馈</View>
          <View
            onClick={() => {
              setShowState(false)
              setDataItem({})
              setIptValue('')
              setTabIndex(null)
            }}
          >
            ✕
          </View>
        </View>
        <View className={styles['content_list']}>
          {content.map((item, index) => {
            return (
              <View
                className={tabIndex === index ? styles['content_list_item_active'] : styles['content_list_item']}
                key={index}
                onClick={() => {
                  setTabIndex(index)
                  setTabContent(item)
                }}
              >
                {item.title}
              </View>
            )
          })}
        </View>
        <Textarea
          className={styles['textarea']}
          placeholder='我们想知道你对此回答不满意的原因，你认为更好的回答是什么？'
          placeholderStyle=' color: #a1a1a1;font-size: 24rpx;'
          value={iptValue}
          onInput={iptFun}
        />
        <View
          className={styles['button']}
          onClick={() => {
            props.submitFun({ ...dataItem, feedbackType: tabContent.id, feedback: iptValue })
          }}
        >
          提交
        </View>
      </View>
    </PageContainer>
  )
})
export default PopFeedback
